﻿@{
    ViewBag.Title = "TicketsRequestInfo";
    Layout = "~/views/shared/_layout.cshtml";

    BusinessLayer.DatabaseEntities.Operator info = new BusinessLayer.DatabaseEntities.Operator();
    if (null != @Session["adminLoginInfo"] as BusinessLayer.DatabaseEntities.Operator)
    {
        info = @Session["adminLoginInfo"] as BusinessLayer.DatabaseEntities.Operator;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ticket</title>
    <link href="~/content/datetimepicker/jquery.datetimepicker.css" rel="stylesheet" />
    <link href="~/content/web/ticketsrequestinfo.css" rel="stylesheet" />
    @*<link href="~/content/select2.min.css" rel="stylesheet" />
    <script src="~/scripts/select2.min.js"></script>*@
</head>
<body>
    @* Layout-header *@

    <div class="container">
        <div id="filter" class="style-bg-green" style="width: 100%">
            <table id="myOpenTickets" class="filter-table">
                <tr>
                    <td>
                        <input id="operator" type="hidden" value="@info.ID" />
                        <input id="status" type="hidden" value='0,1,2,3,5' />
                    </td>
                    <td>
                        <label for="project">Category</label>
                        <select name="project" id="project"></select>
                    </td>
                    <td>
                        <button id="search" class="query-btn">Query</button>
                    </td>
                </tr>
            </table>
            <table id="allTickets" class="filter-table">
                <tr>
                    <td>
                        <label for="status">State</label>
                        <select name="status" id="status">
                            <option value="-1"></option>
                            <option value="1">New</option>
                            <option value="2">In_Work</option>
                            <option value="3">Resolved</option>
                            <option value="5">Pending</option>
                            <option value="4">Closed</option>
                            <option value="0">Reopen</option>
                        </select>
                    </td>
                    <td>
                        <label for="operator">Assign to</label>
                        <select name="operatorId" id="operator"></select>
                    </td>
                    <td>
                        <label for="priority">Priority</label>
                        <select name="priority" id="priority">
                            <option value=""></option>
                            <option id="Priority1" value="1">1-critical</option>
                            <option id="Priority2" value="2">2-high</option>
                            <option id="Priority3" value="3">3-medium</option>
                            <option id="Priority4" value="4">4-low</option>
                        </select>
                    </td>
                    <td>
                        <label for="project">Category</label>
                        <select name="project" id="project" onchange="loadSubCat();"></select>
                    </td>
                    <td>
                        <button id="search" class="query-btn">Query</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="">Start Date</label>
                        <input class="datetime" type="text" name="startDate" id="startDate" style="width:162px;">
                    </td>
                    <td>
                        <label for="endDate">End Date</label>
                        <input class="datetime" type="text" name="endDate" id="endDate" style="width:162px;">
                    </td>
                    <td>
                        <label for="type">IssueType</label>
                        <select name="IssueType" id="IssueType">
                            <option value=""></option>
                        </select>
                    </td>
                    <td>
                        <label for="type">Sub-cat</label>
                        <select name="sub-cat" id="sub-cat">
                        </select>
                    </td>
                    <td colspan="2">
                        
                        <button id="search" class="query-btn">Export</button>
                    </td>
                </tr>
            </table>
        </div>


        <table class="data-table">
            <thead id="theadTr"></thead>

            <tbody id="details"></tbody>

            <tfoot>
                <tr>
                    <td id="pageTd" colspan="11">
                        <div class="pagination">
                            @*<span>上一页</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>...</span><span>下一页</span>*@
                            <span id="first">First</span><span id="previous">Previous</span><span>Current Page<span id="cpage" style="color: red;"></span></span><span id="next">Next</span><span id="last">Last</span><span>Total<span id="totals"></span></span>
                        </div>
                    </td>
                </tr>

            </tfoot>


        </table>

        <!--下载模板文件超链接By Kingkang-->
        <div id="importData" style="display:none;">
            <!--导入Excel-->
            <button id="selectExcel">Select Excel</button>
             @*<input type="file" id="excelfile" name="upload" value="上传文件ing" onchange="submitFile()"/>*@
            <button id="upoadExcel">Upload Excel</button>
        </div>

    </div>

    <!--弹出层-->
    <div class="output">
        <i id="closeOutput" class="fa fa-remove"></i>
        <div class="tbDiv">
            <table id="outputInfo"></table>
        </div>
    </div>
    <!--遮罩层-->
    <div class="hide"></div>

    <script src="~/content/datetimepicker/jquery.datetimepicker.full.js"></script>
    <script type="text/javascript">
        $(function () {
            /*添加header标记*/
            var flag = "<i class='fa fa-angle-down style-green'></i>"
            $("#Tickets ul").before(flag);

            page.$Init();

        })
        var psize = 10, cpage = 1, pagecount;

        var page = {
            $Init: function () {
                /*加载页面*/
                page.$loadPage();

                /*日历控件*/
                page.$datetime();
                /*获取下拉框数据*/
                page.$getSelectData();
                /*分页*/
                page.$pagination();

                /*查询*/
                page.$search();

                page.$loadIssueType();

            },

            /*加载页面*/
            $loadPage: function () {
                var flag = location.search.split("=");
                switch (flag[1]) {
                    case "import":
                        $("#filter").remove();                     
                        $(".pagination").parent().attr("colspan", "14");
                        page.$loadClientInfo();
                        break;
                    case "all":                 //all tickets
                        $("#myOpenTickets").remove();
                        $("#allTickets").css("display", "block");
                        /*加载当前类型的名录*/
                        page.$loadEnterprises();
                        break;
                    default:                    //my open tickets
                        $("#allTickets").remove();
                        $("#myOpenTickets").css("display", "block");
                        /*加载当前类型的名录*/
                        page.$loadEnterprises();
                        break;

                }
            },
            $selectPlugins:function(){
                alert("a");
                $(".select_gallery-multiple").select2();
                $(".select_gallery").select2();
            },

            /*日历控件*/
            $datetime: function () {
                $(".datetime").datetimepicker({
                    timepicker: false,    //关闭时间选项;
                    format: "Y-m-d",     //格式化日期
                    minDate: false,
                    maxDate: false
                });
            },

            /*获取下拉框数据*/
            $getSelectData: function () {
                /*获取project数据*/
                var str = "<option></option>";
                $.ajax({
                    url: "/api/Tickets/GetApplicationInfo",
                    dataType: "json",
                    success: function (data) {
                        $.each(data, function (i, item) {
                            str += "<option value = " + item.ID + ">" + item.Name + "</option>";
                        });
                        $("#project").append(str);
                    }
                });

                /*获取operator数据*/
                var str1 = "<option value></option>";
                $.ajax({
                    url: "/api/Tickets/GetOperatorInfo",
                    dataType: "json",
                    success: function (info) {
                        $.each(info, function (j, item1) {
                            str1 += "<option value = " + item1.ID + ">" + item1.Name + "</option>";
                        });
                        $("#operator").append(str1);
                    }
                });
            },

            /*分页*/
            $pagination: function () {
                $("#previous").click(function () {
                    if (cpage != pagecount) {
                        $("#next").attr("enabled", true);
                    }
                    if (cpage == 1) {

                        $("#previous").attr("enabled", false);
                        return false;
                    }
                    cpage = cpage - 1;
                    page.$loadEnterprises();
                });

                $("#next").click(function () {
                    if (cpage != 1) {
                        $("#previous").attr("enabled", true);
                    }
                    if (cpage == pagecount) {
                        $("#next").attr("enabled", false);
                        return false;
                    }
                    cpage = cpage + 1;
                    page.$loadEnterprises();
                });
                //首页
                $("#first").click(function () {
                    cpage = 1;
                    page.$loadEnterprises();
                });

                $("#last").click(function() {
                    cpage = pagecount;
                    page.$loadEnterprises();
                });
            },

            /*加载当前类型的名录*/
            $loadEnterprises: function () {
                var theadTr,strDate, str3 = "";
                theadTr = "<tr><th>ID</th><th>TicketNO</th><th>Client</th><th>Project</th><th>Open By</th><th>Open Date</th><th>Issue Type</th><th>State</th><th>Assign to</th></tr>";
                $("#theadTr").html(theadTr);
                $.ajax(
                    {
                        url: "/api/Tickets/GetTicketsRequestInfo",
                        type: "post",
                        data: { 'status': $("#status").val().split(","), 'operatorId': $("#operator").val(), 'project': $("#project").val(), 'startDate': $("#startDate").val(), 'endDate': $("#endDate").val(), 'pageSize': psize, 'pageIndex': cpage, 'type': $("#type").val(), 'IssueType': $("#IssueType").val(), 'Priority': $("#priority").val() },
                        success: function (info) {
                            console.log("info  :"+info)
                            pagecount = info.MaxPage;
                            $("#totals").text(pagecount);
                            $("#cpage").text(cpage);
                            //</td><td><a href='/Tickets/TicketDetail?ticketId=" + item2.ID + "'>more</a></td>
                            $.each(info.TicketPCModelList, function (j, item2) {
                                //将获取的YYYY-MM-DDThh:mm:ss.xxx转换成YYYY-MM-DD hh:mm
                                strDate = item2.OpenDate.split(/[T,:]/); 
                                openDate = strDate[0] + " " + strDate[1] + ":" + strDate[2];

                                str3 += "<tr><td>" + (j + 1) + "</td><td><a href='/Tickets/TicketDetail?ticketId=" + item2.ID + "&IsFromWeChat=" + item2.IsFromWeChat + "'>" + item2.TicketNo + "</td>"
                                    + "<td>" + item2.Client + "</td><td>" + item2.Project + "</td><td>"
                                    + item2.OpenBy + "</td><td>" + openDate + "</td><td>" + item2.IssueType + "</td><td>"
                                    + item2.State + "</td><td>" + item2.AssignTo
                                    + "</tr>";
                            });
                            var str4 = "";
                            for (var k = 1; k <= pagecount; k++) {
                                str4 += "<td><a onclick='page.$loadData(this)' style=' cursor:pointer' title='第" + k + "页'>  " + k + "  </a></td>";
                            }
                            $("#page").html(str4);
                            $("#details").html(str3);
                        }
                    });
            },

            /*查询*/
            $search: function () {
                $("#search").click(function () {
                    page.$loadEnterprises();
                });
            },

            /*加载每页的信息*/
            $loadData: function (e) {
                cpage = $(e).text();
                page.$loadEnterprises();
                
            },

            /*加载公司信息-Import*/
            $loadClientInfo: function () {
                var clientInfo = "<option hidden></option>";
                $.ajax({
                    url: "/api/Settings/GetClientInfo",
                    data: { 'ClientName': null },
                    dataType: "json",
                    success: function (info) {
                        $.each(info, function (j, item) {
                            clientInfo += "<option value = " + item.ID + ">" + item.Name + "</option>";
                        });
                        page.$loadImport(clientInfo);     //Import tickets
                        
                    }
                });
            },
            /*加载项目信息-Import*/
            $loadProjectInfo: function () {
                var projectInfo = "<option hidden></option>";
                    $.ajax({
                        url: "/api/Tickets/GetApplicationInfoBySome",
                        data: { 'ClientID': parseInt($("#importCustomer").val()) },
                        type: "GET",
                        dataType: "json",
                        success: function (info) {
                            $.each(info, function (j, item) {
                                projectInfo += "<option value = " + item.ID + ">" + item.Name + "</option>";
                            });
                            $("#importProject").html(projectInfo);
                        }
                    });
            },

            $loadIssueType: function () {
                //获取project的IssueType信息
                var IssueTypeVal = "";
                $.ajax({
                    url: "/api/Settings/GetIssueTypeInfos",
                    data: { 'ProjectID': 0 },
                    dataType: "json",
                    success: function (info) {
                        $.each(info, function (j, item) {
                            if (item.IssueTypeDescription != $("#IssueType").val()) {
                                IssueTypeVal += "<option value = " + item.ID + ">" + item.IssueTypeDescription + "</option>";
                            }
                        });
                        $("#IssueType").append(IssueTypeVal);
                    }
                });
            },

            /*加载Import页面*/
            $loadImport: function (clientInfo) {
                //空白表格
                var importTh, emptyTable, downloadBtn, viewHistoryBtn;
                importTh = "<tr><th>No</th><th>TicketNo</th><th>CustomerID</th><th>ProjectID</th><th>OpenBy</th>"
                    + "<th>OpenDate</th><th>Title</th><th>AssignDate</th><th>First AssignedUserName</th><th>SolvedUserName</th>"
                    + "<th>ApplicationName</th><th>Location</th><th>Module</th><th>ServiceRate</th>";
                emptyTable = "<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"
                    + "<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"
                    + "<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"
                    + "<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"
                    + "<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
                downloadBtn = "<i class='fa fa-download'> <a href='../Tickets/DownLoadTemp'>Download Template</a></i>";
                viewHistoryBtn = "<i class='fa fa-history'> <a href='javascript:void(0)' onclick='getHistoryDate()'>View History</a></i>";
                $("#theadTr").append(importTh);
                $("tfoot tr").before("<tr><td colspan='14'><div style='float: right;'>" + downloadBtn + viewHistoryBtn + "</div></td></tr>");
                $("#details").html(emptyTable);
                $("#importData").css("display", "block");
                importExcel.$selectExcel(clientInfo);     //调用select excel按钮点击事件
                importExcel.$upoadExcel();      //上传文件
            },

            //显示弹出层
            $showOutput: function () {
                var h = $(document).height();       //获取内容高度
                $(".hide").css({ display: "block", height: h + "px" });
                $(".output").css("display", "block");
                $("#closeOutput").click(function () {
                    page.$closeOutput();
                });
            },

            //关闭弹出层
            $closeOutput: function () {
                $(".hide").css("display", "none");
                $(".output").css("display", "none");
                $("#outputInfo").empty();
                $(".saveInfo").remove();
            },
        };

        var prompt = "<span class='prompt' style='color:red;position:absolute;'>Empty!</span>";
        var importExcel = {
            //选择Customer和project
            $selectExcel: function (clientInfo) {
                $("#selectExcel").click(function () {
                    var choseCustomerPro = "<tr><td>Customer</td><td><select id='importCustomer' onchange='page.$loadProjectInfo()'></select></td></tr><tr><td>Project</td><td><select id='importProject'></select></td></tr>"
                    $("#outputInfo").html(choseCustomerPro);
                    $("#importCustomer").html(clientInfo);
                    //显示弹出层
                    page.$showOutput();
                    if (!$("#saveFile").length) {
                    $(".output").append("<div id='saveFile'><button id='saveSelect'>Save</button><input type='file' id='excelfile' name='upload' value='上传文件ing' onchange = 'submitFile()'/>");
                    }

                    //及时校验
                    $("#importCustomer").blur(function () {
                        $(this).parent().find(".prompt").remove();
                        if (!$(this).val()) {
                            $(this).after(prompt);
                        }
                    });

                    $("#importProject").blur(function () {
                        $(this).parent().find(".prompt").remove();
                        if (!$(this).val()) {
                            $(this).after(prompt);
                        }
                    });
                    importExcel.$saveExcel();
                });

                
            },

            //选择文件
            $saveExcel: function () {
                alert("aaa");

                $("#saveSelect").click(function () {
                    var saveFlag = 1;
                    $(".prompt").remove();      //去掉错误提示
                    var $importCustomer = $("#importCustomer"), $importProject = $("#importProject");
                    if (!$importCustomer.val()) {           //customer为空
                        $importCustomer.after(prompt);
                        saveFlag *= 0;
                    }
                    if (!$importProject.val()) {           //project为空
                        $importProject.after(prompt);
                        saveFlag *= 0;
                    }
                    if (saveFlag) {     //均不为空
                        alert("file");
                        $("#excelfile").click();
                    }
                })
            },

            //文件上传
            $upoadExcel: function () {
                $("#upoadExcel").click(function () {
                    $.ajax({
                        url: "/api/Tickets/UploadTickets",
                        type: "post",
                        dataType: "json",
                        success: function (info) {
                            if (info == null) {
                                alert("上传成功！");
                            } else {
                                alert(info);
                            }
                        }
                    });
                });
            }


        };

        function loadSubCat() {
            var subcat = "<option hidden></option>";
            if ($("#project").val() == 2) {
                subcat = "<option value = 1>Prometheus</option><option value = 2>Centrix</option><option value = 3>Hospital Database</option>";
            }
            $("#sub-cat").html(subcat);
        }

        //查看上传历史ByKingkang
        function getHistoryDate() {
            $.ajax(
                {
                    url: "/api/Tickets/GetImportView",
                    type: "post",
                    success: function (info) {
                        var str = "";
                        if (info == null) {
                            alert("还没有上传历史！");
                        } else {
                            $.each(info, function (j, date) {
                                str = str + "\r\n" + date;
                            })
                            alert(str);
                        }
                    }
                });
        }
        //文件预览Bykingkang
        function submitFile() {
            page.$closeOutput();        //关闭弹出层
            var formData = new FormData();
            formData.append("myfile", document.getElementById("excelfile").files[0]);
            formData.append("CustomerID",$("#importCustomer").val());
            formData.append("ProjectID", $("#importProject").val());
            $.ajax({
                url: "../api/Tickets/ImportTicketView",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    if (typeof (data) == "undefined") {
                        alert("未上传");
                    }
                    var importTh, showImportData;

                    $.each(data, function (j, item2) {
                        if (item2.TicketNo != null) {
                            showImportData += "<tr><td>" + (j + 1) + "</td><td>"
                                + (item2.TicketNo == null ? "--" : item2.TicketNo) + "</td><td>"
                                + (item2.CustomerID == null ? "--" : item2.CustomerID) + "</td><td>"
                                + (item2.ProjectID == null ? "--" : item2.ProjectID) + "</td><td>"
                                + (item2.OpenBy == null ? "--" : item2.OpenBy) + "</td><td>"
                                + (item2.OpenDate == null ? "--" : item2.OpenDate) + "</td><td>"
                                + (item2.Title == null ? "--" : item2.Title) + "</td><td>"
                                + (item2.AssignDate == null ? "--" : item2.AssignDate) + "</td><td>"
                                + (item2.FirstAssignedUserName == null ? "--" : item2.FirstAssignedUserName) + "</td><td>"
                                + (item2.SolvedUserName == null ? "--" : item2.SolvedUserName) + "</td><td>"
                                + (item2.ApplicationName == null ? "--" : item2.ApplicationName) + "</td><td>"
                                + (item2.Location == null ? "--" : item2.Location) + "</td><td>"
                                + (item2.Module == null ? "--" : item2.Module) + "</td><td>"
                                + (item2.ServiceRate == null ? "--" : item2.ServiceRate) + "</td></tr>"
                        }
                    });
                    $("#details").html(showImportData);
                }
            });
        }


    </script>
</body>
</html>
